<div class="float_container">
	<div class="left">
		<div class="main_post">
		<?php
			$this->post_plugin->setPost($this->post);
			echo $this->post_plugin->display();
		?>
		</div>
		<a name="comments"></a>
		<div class="divider_text">
			Comments
		</div>
		<div class="comments">
		<?php
			$i = 0;
			foreach($this->comments as $comment)
			{
				if($i == 0)
				{
					$class = "even";
					$i = 1;
				}
				else
				{
					$class = "odd";
					$i = 0;
				}
				//echo "<div class=" . $class . ">";
				$this->comment_plugin->setcomment($comment);
				echo $this->comment_plugin->display();
				//echo "</div>";
			}
		?>
			<div id="last_comment"></div>
		</div>
		<div class="add_comment">
			<div class="divider_text">
				Post a comment
			</div>
			<div class="comment_form">
				<div id="comment_errors" class="error" style="display: none;">
				</div>
				<div class="float_container">
					<div class="header">Name:</div>
					<div class="input"><input type="text" id="comment_name" /></div>
				</div>
				<div class="float_container">
					<div class="header">Email (optional):</div>
					<div class="input"><input type="text" id="comment_email" /></div>
				</div>
				<div class="float_container">
					<div class="header">URL (optional):</div>
					<div class="input"><input type="text" id="comment_url" /></div>
				</div>
				(Allowed tags: &lt;a&gt; &lt;p&gt; &lt;strong&gt; &lt;em&gt;)
				<textarea rows="10" cols="40" id="comment_comment"></textarea>
				<div id="spam_check" class="spam_check">
					<p>Sorry, but due to spambots, to post I'll need you to prove you're human.</p>
					<p>Of the six following animals, just select the two that are <span style="color: red; font-weight: bold;">not</span> fluffy</p>
					<?php
						$i = 1;
						echo '<div class="float_container">';
						foreach($this->spam_check_pics as $pic_no)
						{
							echo '<div class="spam_check_pic"><img id="' . $pic_no . '" src="app/img/spam_pics/' . $pic_no . '.png" /></div>';
							if($i % 3 == 0)
							{
								echo "</div>";
								echo '<div class="float_container">';
							}
							$i++;
						}
						echo "</div>";
					?>
				</div>
				<input type="hidden" id="spam_pics_selected" />
				<div id="comment_submit_div" style="line-height: 25px; height: 25px;">
					<input id="comment_submit_button" type="button" value="Post Comment" onclick="spam_confuser.submit();" />
				</div>
				<script type="text/javascript">
					var SpamConfuser = new Class({
						initialize: function(image_div){
							this.container = $(image_div);
							this.container.getElements('img').each(function(img){
								img = $(img);
								img.addEvent('click', this.selectImage.bind(this))
							}, this);
						},
						selectImage: function(e){
							img = $(e.target);
							if(img.hasClass('selected'))
							{
								img.removeClass('selected');
							}
							else
							{
								img.addClass('selected');
							}
						},
						submit: function(){
							$('comment_submit_button').disabled = true;
							var img = new Element('img').setProperty('id', 'comment_submit_loading').setProperty('src', 'app/img/layout/loading.gif').setStyle('margin-bottom', '5px');
							img.inject($('comment_submit_div'), 'inside');
						    var fadeOut = new Fx.Morph('comment_errors', {duration: 500, transition: Fx.Transitions.Sine.easeOut});
							fadeOut.start({
								'height': 0,
								'padding': 0
							}).chain(this.request.bind(this));
						},
						request: function(){
							$('comment_errors').setStyle('display', 'none');
							// Find the images that were picked
							var images = [];
							var dom = $('spam_check').getElements('img.selected');
							dom.each(function(img){
								images.push(img.id);
							});
							
							var url = '/blog/comment/add?guimode=ajax';
							new Request.JSON({
								url: url,
								onSuccess: this.update.bind(this),
								secure: 'false'
							}).post({'name':$('comment_name').value,
										'email':$('comment_email').value,
										'url':$('comment_url').value,
										'comment':$('comment_comment').value,
										'fluffy_images':images.join(','),
										'post_id':<?php echo $this->post->getId(); ?>});
						},
						update: function(response){
							$('comment_submit_button').disabled = false;
							$('comment_submit_loading').remove();
							if(response){
								if(response.status == 'success'){
									var new_div = new Element('div');
									//new_div.addClass('odd');
									new_div.setProperty('id', response.id)
									new_div.setProperty('style', 'overflow: hidden;')
									new_div.set('html', Base64.decode(response.message));
									new_div.inject($('last_comment'), 'before');
									hidden_size = new_div.getOffsetSize().y;
									new_div.remove();
									new_div.setStyle('height', '0px');
									new_div.inject($('last_comment'), 'before');
									//console.log(hidden_height);
						            var fadeIn = new Fx.Morph(response.id, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
									fadeIn.start({
										'height': [0, hidden_size]
									});
									$('comment_comment').value = "";
								}
								else{
									// Failure =(
									$('comment_errors').setStyle('display', 'block');
									$('comment_errors').setStyle('height', '0px');
									$('comment_errors').set('html', Base64.decode(response.message));
									var new_div = new Element('div');
									new_div.set('html', Base64.decode(response.message));
									new_div.inject($('footer'), 'inside');
									hidden_size = new_div.getOffsetSize().y;
									new_div.remove();
									//console.log(hidden_height);
						            var fadeIn = new Fx.Morph('comment_errors', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
									fadeIn.start({
										'height': [0, hidden_size],
										'padding': 10
									});
								}
							}
							else{
								$('comment_errors').setStyle('display', 'block');
								$('comment_errors').setStyle('height', '0px');
								$('comment_errors').set('html', "An unknown error occured");
								var new_div = new Element('div');
								new_div.set('html', "An unknown error occured");
								new_div.inject($('footer'), 'inside');
								hidden_size = new_div.getOffsetSize().y;
								new_div.remove();
								//console.log(hidden_height);
						        var fadeIn = new Fx.Morph('comment_errors', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
								fadeIn.start({
									'height': [0, hidden_size],
									'padding': 10
								});
							}
						}
					});

					var spam_confuser;
					window.addEvent('domready', function(){
						spam_confuser = new SpamConfuser('spam_check');
					});
				</script>
			</div>
		</div>
	</div>
	<?php include('app/templates/gui/rightbar.tpl'); ?>
</div>